import React from "react"
import ReactDOM from "react-dom"
require ('./ReachBottom.less')

class AComponentForTest extends React.Component {
    constructor(props) {
        super(props);
        this.handleScroll = this.handleScroll.bind(this)
    }

    componentDidMount() {
        window.addEventListener("scroll", this.handleScroll)
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.handleScroll)
    }

    reachBottom(value) {
        const {bottom, onBottom} = this.props
        if(value !== bottom) {
            onBottom(value)
        }
    }

    handleScroll() {
        const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
        const body = document.body;
        const html = document.documentElement;
        const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
        const windowBottom = windowHeight + window.pageYOffset;
        if (windowBottom >= docHeight) {
            this.reachBottom(true)
        } else {
            this.reachBottom(false)
        }
    }

    render() {
        const {bottom, height} = this.props
        const heightStyle = height ? `${height}px` : '49px';
        const pl_style = {
            height: bottom ? '0' : heightStyle
        }
        return (
            <div style={pl_style}>
            </div>
        )
    }
}

module.exports = AComponentForTest